import React, { Component } from 'react';
import {
  Button,
  Modal,
  Select,
  Form,
  Row,
  Col,
  Input,
  DatePicker,
  Radio,
  message,
  Upload,
  Card,
} from 'antd';
import { connect } from 'dva';
const { TextArea } = Input;
import style from './index.css';
import BaseComponent from '@/components/BaseComponent';
import moment from 'moment';
import ReportCard from '@/components/ReportCard';
import request from 'umi-request';
import { reject } from 'lodash/collection';

@connect(({ user }) => ({
  // data: risk.riskData,
  currentUser: user.currentUser,
}))
@Form.create()
export default class index extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      form: {},
      uploadLoading: false,
      allTableData: [],
      provinceIdData: [],
      cityIdData: [],
      districtIdData: [],
      countyIdData: [],
      villageIdData: [],
      nationCodeData: [],
      searchname: '',
      queryPersonInfo: '',
      queryPersonInfoByNameOrIdCardData: [],
      writtenConsentFilePath: undefined,
      villageCodeData: [],
    };
    // this.socket = new WebSocket('ws://127.0.0.1:8989');
  }

  componentDidMount() {
    // this.getAreaByUserId()
    this.getCity({ level: 1, parentCode: '1' });
    this.nationlist();
    this.getVillagesByNameOrIdCard();
  }

  saveClick = () => {
    this.addData(this.state.form);
  };

  readIdCardClick = () => {
    fetch('http://localhost:8989/api/ReadMsg?waitTime=3')
      .then(response => {
        // 判断读卡程序是否启动
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        if (data.code === '-1') {
          if (data.retcode === '0x41') {
            message.error('请检查是否放置身份证');
          } else if (data.retcode === '0x1') {
            message.error('请检查读卡器是否妥善连接');
          }
        } else if (data.code === '0') {
          const provinceId = data.cardno.substring(0, 2);
          const cityId = data.cardno.substring(0, 4);
          const districtId = data.cardno.substring(0, 6);

          const p1 = this.getCity({ level: 2, parentCode: provinceId });
          const p2 = this.getCity({ level: 3, parentCode: cityId });
          const p3 = this.getCity({ level: 4, parentCode: districtId });
          Promise.all([p1, p2, p3]).then(() => {
            this.setState(
              {
                form: {
                  provinceId: provinceId,
                  cityId: cityId,
                  districtId: districtId,
                  name: data.name,
                  sex: data.sex,
                  birthday:
                    data.cardno.substring(6, 10) +
                    '-' +
                    data.cardno.substring(10, 12) +
                    '-' +
                    data.cardno.substring(12, 14),
                  addr: data.address,
                  idCard: data.cardno,
                  qfjg: data.police,
                  yxStartDate:
                    data.userlifeb.substring(0, 4) +
                    '-' +
                    data.userlifeb.substring(4, 6) +
                    '-' +
                    data.userlifeb.substring(6, 8),
                  yxEndDate:
                    data.userlifee.substring(0, 4) +
                    '-' +
                    data.userlifee.substring(4, 6) +
                    '-' +
                    data.userlifee.substring(6, 8),
                },
              },
              () => {
                this.nationCodeChange(
                  parseInt(this.findKeyByValue(this.state.nationCodeData, data.nation + '族'), 10) +
                    1
                );
                this.provinceIdChange(this.state.form.provinceId);
                this.cityIdChange(this.state.form.cityId);
                this.districtIdChange(this.state.form.districtId);
              }
            );
          });
        }
      })
      .catch(error => {
        console.error('Fetch error:', error);
        message.error('请检查读卡程序是否启动');
      });
  };

  // 根据值找键，用于身份证读取时，民族的初始化
  findKeyByValue(object, value) {
    return Object.keys(object).find(key => object[key] === value);
  }

  handleUploadBefore = (file, fileList) => {
    this.setState({ uploadLoading: true }, () => {
      this.hide = this.loadingMessage('正在上传...');
    });
    return true;
  };

  searchnameChange = e => {
    const value = e.target.value;
    this.setState(
      {
        searchname: value,
      },
      () => {
        this.queryPersonInfoByNameOrIdCard(this.state.searchname);
        this.getVillagesByNameOrIdCard();
      }
    );
  };

  queryPersonInfoChange = value => {
    this.setState(
      {
        queryPersonInfo: value,
      },
      () => {
        this.queryPersonInfoByNameOrIdCard(this.state.searchname, this.state.queryPersonInfo);
      }
    );
  };
  nameIdCardData = value => {
    const str = value
      ? this.state.queryPersonInfoByNameOrIdCardData.find(item => item.id == value)
      : '';
    this.getCity({ level: 1, parentCode: '' });
    this.getCity({ level: 2, parentCode: '34' });
    this.getCity({ level: 3, parentCode: str.city_id });
    this.getCity({ level: 4, parentCode: str.district_id });
    this.getCity({ level: 5, parentCode: str.county_id });
    this.nationlist();
    setTimeout(() => {
      this.setState(params => ({
        queryPersonInfo: str.name,
        form: {
          ...params.form,
          personId: str.id,
          name: str.name,
          idCard: str.id_card,
          sex: str.sex,
          nationCode: str.nation_code,
          nationName: str.nation_name,
          provinceId: '34',
          provinceName: str.province_name,
          cityId: str.city_id,
          cityName: str.city_name,
          districtId: str.district_id,
          districtName: str.district_name,
          countyId: str.county_id,
          countyName: str.county_name,
          villageId: str.village_id,
          villageName: str.village_name,
          phone: str.phone,
          addr: str.addr,
          qfjg: str.qfjg,
          yxStartDate: str.yx_start_date,
          yxEndDate: str.yx_end_date,
          birthday: str.birthday,
        },
      }));
    }, 100);
  };

  handleUploadBefore = (file, fileList) => {
    this.setState({ isUploading: true }, () => {
      this.hide = this.loadingMessage('正在上传...');
    });
    return true;
  };
  handleBlUploadChange = ({ info }) => {
    if (info.file.status !== 'uploading') {
      this.setState(
        {
          fileList: info.fileList,
        },
        () => {}
      );
    }
    if (info.file.status === 'done') {
      const response = info.file.response;
      const {
        data: { filePath, originalFilename },
      } = response;
      const arr = filePath.split('/');
      // 文件前缀
      const prefix = arr[arr.length - 2];
      const url = `${prefix}/${originalFilename}`;

      this.setState(params => ({
        form: {
          ...params.form,
          writtenConsentFilePath: filePath,
          writtenConsentUrl: url,
        },
        isUploading: false,
      }));
      if (this.hide) {
        this.hide();
      }
      this.successMessage('上传成功');
    } else if (info.file.status === 'error') {
      this.errorMessage('文件上传出错,请联系管理员');
    }
  };
  handleDelBlImage = () => {
    this.setState(params => ({
      form: {
        ...params.form,
        writtenConsentFilePath: '',
        writtenConsentUrl: '',
      },
    }));
  };

  provinceIdChange = value => {
    const str = value ? this.state.provinceIdData.find(item => item.code == value) : '';
    console.log(str);
    const name = str.name;
    this.setState(
      params => ({
        form: {
          ...params.form,
          provinceId: value,
          provinceName: name,
        },
      }),
      () => {
        this.getCity({ level: 2, parentCode: value });
      }
    );
  };
  cityIdChange = value => {
    const str = value ? this.state.cityIdData.find(item => item.code == value) : '';
    console.log(this.state.cityIdData);
    console.log(str);
    const name = str.name;
    this.setState(
      params => ({
        form: {
          ...params.form,
          cityId: value,
          cityName: name,
        },
      }),
      () => {
        this.getCity({ level: 3, parentCode: value });
      }
    );
  };

  districtIdChange = value => {
    const str = value ? this.state.districtIdData.find(item => item.code == value) : '';
    console.log(this.state.districtIdData);
    console.log(str);
    const name = str.name;
    this.setState(
      params => ({
        form: {
          ...params.form,
          districtId: value,
          districtName: name,
        },
      }),
      () => {
        this.getCity({ level: 4, parentCode: value });
      }
    );
  };

  countyIdChange = value => {
    const str = value ? this.state.countyIdData.find(item => item.code == value) : '';
    const name = str.name;
    this.setState(
      params => ({
        form: {
          ...params.form,
          countyId: value,
          countyName: name,
        },
      }),
      () => {
        this.getCity({ level: 5, parentCode: value });
      }
    );
  };

  villageIdChange = value => {
    const str = value ? this.state.villageIdData.find(item => item.code == value) : '';
    const name = str.name;
    this.setState(params => ({
      form: {
        ...params.form,
        villageId: value,
        villageName: name,
      },
    }));
  };

  nameChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        name: value,
      },
    }));
  };

  sexChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        sex: value,
      },
    }));
  };

  nationCodeChange = value => {
    if (value !== -1) {
      const person = this.state.nationCodeData[value - 1];
      this.setState(params => ({
        form: {
          ...params.form,
          nationCode: value.toString(),
          nationName: person,
        },
      }));
    }
  };
  birthdayChange = (date, dateString) => {
    console.log(date, dateString);
    this.setState(params => ({
      form: {
        ...params.form,
        birthday: dateString,
      },
    }));
  };

  addrChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        addr: value,
      },
    }));
  };

  idCardChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        idCard: value,
      },
    }));
  };

  qfjgChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        qfjg: value,
      },
    }));
  };

  yxStartDateChange = (date, dateString) => {
    console.log(date, dateString);
    this.setState(params => ({
      form: {
        ...params.form,
        yxStartDate: dateString,
      },
    }));
  };

  yxEndDateChange = (date, dateString) => {
    console.log(date, dateString);
    this.setState(params => ({
      form: {
        ...params.form,
        yxEndDate: dateString,
      },
    }));
  };
  phoneChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        phone: value,
      },
    }));
  };
  selfSignDateChange = (date, dateString) => {
    console.log(date, dateString);
    this.setState(params => ({
      form: {
        ...params.form,
        selfSignDate: dateString,
      },
    }));
  };
  proofDateChange = (date, dateString) => {
    console.log(date, dateString);
    this.setState(params => ({
      form: {
        ...params.form,
        proofDate: dateString,
      },
    }));
  };
  proofNameChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        proofName: value,
      },
    }));
  };

  screeningTypeChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        screeningType: value,
      },
    }));
  };

  // 数据上报——添加：根据当前登录用户的所在机构，默认渲染省、市的数据
  // getAreaByUserId = () => {
  //     request("/api/cdcerservice/v1/cerSysteminitImportInfo/getAreaByUserId?userId=" + this.props.currentUser.id, {
  //         method: "GET",
  //     }).then((resp) => {
  //         if (resp.success && resp.data.provinceId) {
  //             this.setState({
  //                 form: {
  //                     provinceId: resp.data.provinceId,
  //                     provinceName: resp.data.provinceName,
  //                     cityId: resp.data.cityId,
  //                     cityName: resp.data.cityName,
  //                 }
  //             });
  //             this.getCity({ level: 2, parentCode: resp.data.provinceId })
  //         }
  //     });
  // }

  //查询省
  getCity = param => {
    return new Promise(resolve => {
      this.execHttp('plannedFollowUp/getCity', { ...param }).then(resp => {
        if (resp) {
          if (param.level == 1) {
            this.setState({
              provinceIdData: resp.data,
            });
            resolve();
          } else if (param.level == 2) {
            this.setState({
              cityIdData: resp.data,
            });
            resolve();
          } else if (param.level == 3) {
            this.setState({
              districtIdData: resp.data,
            });
            resolve();
          } else if (param.level == 4) {
            this.setState({
              countyIdData: resp.data,
            });
            resolve();
          } else if (param.level == 5) {
            this.setState({
              villageIdData: resp.data,
            });
            resolve();
          }
        }
      });
    });
  };
  //民族  nationlist
  nationlist = () => {
    this.execHttp('personalInformation/nationlist').then(resp => {
      if (resp) {
        this.setState({
          nationCodeData: resp.data,
        });
      }
    });
  };

  //添加保存
  addData = from => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.execHttp('crowdDataReport/addData', {
          ...from,
        }).then(resp => {
          if (resp && resp.success) {
            message.success(resp.message);
            this.setState({
              form: {},
              searchname: '',
              queryPersonInfo: '',
              queryPersonInfoByNameOrIdCardData: [],
            });

            // 获取当前表单的所有字段名
            const fields = this.props.form.getFieldsValue();
            // 将所有字段的值置为null
            Object.keys(fields).forEach(field => {
              fields[field] = null;
            });
            // 使用setFieldsValue方法将所有字段的值设置为null
            this.props.form.setFieldsValue(fields);
          } else {
            message.error(resp.message);
          }
        });
      }
    });
  };

  getBrithDate = e => {
    const idCardNumber = e.target.value;
    var extractedSubstring = idCardNumber.slice(6, 15);
    console.log(111);
    if (extractedSubstring) {
      var birthYear = extractedSubstring.substring(0, 4);
      var birthMonth = extractedSubstring.substring(4, 6);
      var birthDay = extractedSubstring.substring(6, 8);

      // 返回格式化后的出生日期

      this.setState({
        form: {
          ...this.state.form,
          birthday: birthYear + '-' + birthMonth + '-' + birthDay,
        },
      });
    }

    // 如果无法匹配出生日期，则返回空字符串或其他默认值
    return '';
  };
  queryPersonInfoByNameOrIdCard = (name, villageCode) => {
    this.execHttp('crowdDataReport/queryPersonInfoByNameOrIdCard', {
      name,
      villageCode,
    }).then(resp => {
      if (resp && resp.success) {
        this.setState({
          queryPersonInfoByNameOrIdCardData: resp.data.list,
        });
      }
    });
  };
  getVillagesByNameOrIdCard = () => {
    this.execHttp('crowdDataReport/getVillagesByNameOrIdCard', {
      name: this.state.searchname,
      user: this.props.currentUser.id,
    }).then(resp => {
      if (resp && resp.success) {
        this.setState({
          villageCodeData: resp.data.list,
        });
      }
    });
  };

  render() {
    const { visible } = this.state;
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      // wrapperCol: {
      //     xs: { span: 24 },
      //     sm: { span: 16 },
      // },
    };

    return (
      <Card style={{ width: '100%' }}>
        <Form layout="vertical">
          <Row gutter={16}>
            <Col span={4}>
              <Row gutter={16}>
                <Col span={12}>
                  <Input
                    placeholder="请输入姓名或身份证"
                    value={this.state.searchname}
                    onChange={this.searchnameChange}
                    style={{ width: 200 }}
                  />
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={12}>
                  <Select
                    allowClear
                    value={this.state.queryPersonInfo}
                    onChange={this.queryPersonInfoChange}
                    style={{ width: 200 }}
                    placeholder="请选择"
                  >
                    {this.state.villageCodeData.map(item => (
                      <Select.Option key={item.code}>{item.name}</Select.Option>
                    ))}
                  </Select>
                </Col>
              </Row>
              <Row gutter={16} style={{ overflowY: 'scroll', height: 600 }}>
                <Col span={12}>
                  {this.state.queryPersonInfoByNameOrIdCardData.map(item => (
                    <span
                      onClick={() => {
                        this.nameIdCardData(item.id);
                      }}
                      style={{ display: 'inline-block', width: '100%' }}
                      key={item.id}
                    >
                      {' '}
                      {item.name}
                    </span>
                  ))}
                </Col>
              </Row>
            </Col>

            <Col span={20}>
              <Card style={{ width: '100%' }}>
                <Form {...formItemLayout} layout="inline" labelAlign="left">
                  <Row gutter={8}>
                    <Col span={8}>
                      <Form.Item label="所属省份">
                        {getFieldDecorator('provinceId', {
                          initialValue: this.state.form.provinceId,
                          rules: [{ required: true, message: '所属省份不能为空' }],
                        })(
                          <Select
                            allowClear
                            onChange={this.provinceIdChange}
                            style={{ width: 200 }}
                            placeholder="请选择所属省份"
                          >
                            {this.state.provinceIdData.map(item => (
                              <Select.Option key={item.code}>{item.name}</Select.Option>
                            ))}
                          </Select>
                        )}
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item label="所属城市">
                        {getFieldDecorator('cityId', {
                          initialValue: this.state.form.cityId,
                          rules: [{ required: true, message: '所属城市不能为空' }],
                        })(
                          <Select
                            allowClear
                            onChange={this.cityIdChange}
                            style={{ width: 200 }}
                            placeholder="请选择所属城市"
                          >
                            {this.state.cityIdData.map(item => (
                              <Select.Option key={item.code}>{item.name}</Select.Option>
                            ))}
                          </Select>
                        )}
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item label="所属区/县">
                        {getFieldDecorator('districtId', {
                          initialValue: this.state.form.districtId,
                          rules: [{ required: true, message: '所属区/县不能为空' }],
                        })(
                          <Select
                            allowClear
                            onChange={this.districtIdChange}
                            style={{ width: 200 }}
                            placeholder="请选择所属区/县"
                          >
                            {this.state.districtIdData.map(item => (
                              <Select.Option key={item.code}>{item.name}</Select.Option>
                            ))}
                          </Select>
                        )}
                      </Form.Item>
                    </Col>
                  </Row>

                  <Row gutter={16}>
                    <Col span={8}>
                      <Form.Item label="所属乡镇">
                        {getFieldDecorator('countyId', {
                          rules: [{ required: true, message: '所属乡镇不能为空' }],
                        })(
                          <Select
                            allowClear
                            onChange={this.countyIdChange}
                            style={{ width: 200 }}
                            placeholder="请选择所属乡镇"
                          >
                            {this.state.countyIdData.map(item => (
                              <Select.Option key={item.code}>{item.name}</Select.Option>
                            ))}
                          </Select>
                        )}
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item label="所属村">
                        {getFieldDecorator('villageId', {
                          rules: [{ required: true, message: '所属村不能为空' }],
                        })(
                          <Select
                            allowClear
                            onChange={this.villageIdChange}
                            style={{ width: 200 }}
                            placeholder="请选择所属村"
                          >
                            {this.state.villageIdData.map(item => (
                              <Select.Option key={item.code}>{item.name}</Select.Option>
                            ))}
                          </Select>
                        )}
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item label="姓名">
                        {getFieldDecorator('name', {
                          initialValue: this.state.form.name,
                          rules: [{ required: true, message: '姓名不能为空' }],
                        })(
                          <Input
                            placeholder="姓名"
                            onChange={this.nameChange}
                            style={{ width: 200 }}
                          />
                        )}
                      </Form.Item>
                    </Col>
                  </Row>

                  <Row gutter={16}>
                    <Col span={8}>
                      <Form.Item label="性别">
                        {getFieldDecorator('sex', {
                          initialValue: this.state.form.sex,
                          rules: [{ required: true, message: '性别不能为空' }],
                        })(
                          <Radio.Group onChange={this.sexChange}>
                            <Radio value={'男'}>男</Radio>
                            <Radio value={'女'}>女</Radio>
                          </Radio.Group>
                        )}
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item label="民族">
                        {getFieldDecorator('nationCode', {
                          initialValue: this.state.form.nationCode,
                          rules: [{ required: true, message: '民族不能为空' }],
                        })(
                          <Select
                            allowClear
                            onChange={this.nationCodeChange}
                            style={{ width: 200 }}
                            placeholder="请选择民族"
                          >
                            {this.state.nationCodeData.map((item, index) => (
                              <Select.Option key={index + 1}>{item}</Select.Option>
                            ))}
                          </Select>
                        )}
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item label="出生日期">
                        {getFieldDecorator('birthday', {
                          initialValue: this.state.form.birthday
                            ? moment(this.state.form.birthday, 'YYYY-MM-DD')
                            : null,
                          rules: [{ required: true, message: '出生日期不能为空' }],
                        })(
                          <DatePicker
                            style={{ width: 200 }}
                            showTime
                            format="YYYY-MM-DD"
                            onChange={this.birthdayChange}
                          />
                        )}
                      </Form.Item>
                    </Col>
                  </Row>

                  <Row gutter={16}>
                    <Col span={8}>
                      <Form.Item label="住址">
                        {getFieldDecorator('addr', {
                          initialValue: this.state.form.addr,
                          rules: [{ required: true, message: '住址不能为空' }],
                        })(
                          <Input
                            placeholder="住址"
                            onChange={this.addrChange}
                            style={{ width: 200 }}
                          />
                        )}
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item label="身份证号码">
                        {getFieldDecorator('idCard', {
                          initialValue: this.state.form.idCard,
                          rules: [
                            { required: true, message: '身份证不能为空' },
                            { pattern: /^\d{17}(\d|X|x)$/, message: '身份证格式不正确' },
                          ],
                        })(
                          <Input
                            placeholder="身份证号码"
                            onBlur={this.getBrithDate}
                            onChange={this.idCardChange}
                            style={{ width: 200 }}
                          />
                        )}
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item label="签发机关">
                        <Input
                          placeholder="签发机关"
                          value={this.state.form.qfjg}
                          onChange={this.qfjgChange}
                          style={{ width: 200 }}
                        />
                      </Form.Item>
                    </Col>
                  </Row>

                  <Row gutter={16}>
                    <Col span={8}>
                      <Form.Item label="有限期限起始">
                        <DatePicker
                          style={{ width: 200 }}
                          showTime
                          format="YYYY-MM-DD"
                          value={
                            this.state.form.yxStartDate === undefined
                              ? this.state.form.yxStartDate
                              : moment(this.state.form.yxStartDate, 'YYYY-MM-DD')
                          }
                          onChange={this.yxStartDateChange}
                        />
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item label="有限期限结束">
                        <DatePicker
                          style={{ width: 200 }}
                          showTime
                          format="YYYY-MM-DD"
                          value={
                            this.state.form.yxEndDate === undefined
                              ? this.state.form.yxEndDate
                              : moment(this.state.form.yxEndDate, 'YYYY-MM-DD')
                          }
                          onChange={this.yxEndDateChange}
                        />
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item label="手机号">
                        {getFieldDecorator('phone', {
                          rules: [
                            { required: true, message: '手机号不能为空' },
                            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
                          ],
                        })(
                          <Input
                            placeholder="手机号"
                            onChange={this.phoneChange}
                            style={{ width: 200 }}
                          />
                        )}
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={24}>
                      <Form.Item labelCol={{ span: 6, offset: 0 }} label="同意书">
                        <ReportCard
                          imagePreview={true}
                          emptyMsg={'暂无同意书,请上传同意书'}
                          uploadBtnLabel={'上传同意书'}
                          fileUrl={this.state.form.writtenConsentUrl}
                          isUploading={this.state.isUploading}
                          beforeUpload={this.handleUploadBefore}
                          onChange={this.handleBlUploadChange}
                          onDelClick={this.handleDelBlImage}
                        ></ReportCard>
                      </Form.Item>
                    </Col>
                  </Row>

                  <Row gutter={16}>
                    <Col span={8}>
                      <Form.Item label="自我申请签订日期" labelCol={{ span: 12, offset: 0 }}>
                        <DatePicker
                          style={{ width: 200 }}
                          showTime
                          format="YYYY-MM-DD"
                          value={
                            this.state.form.selfSignDate === undefined
                              ? this.state.form.selfSignDate
                              : moment(this.state.form.selfSignDate, 'YYYY-MM-DD')
                          }
                          onChange={this.selfSignDateChange}
                          disabled={
                            this.state.form.writtenConsentUrl === undefined ||
                            this.state.form.writtenConsentUrl === ''
                          }
                        />
                      </Form.Item>
                    </Col>

                    <Col span={8}>
                      <Form.Item label="证明人声明日期">
                        <DatePicker
                          style={{ width: 200 }}
                          showTime
                          format="YYYY-MM-DD"
                          value={
                            this.state.form.proofDate === undefined
                              ? this.state.form.proofDate
                              : moment(this.state.form.proofDate, 'YYYY-MM-DD')
                          }
                          onChange={this.proofDateChange}
                          disabled={
                            this.state.form.writtenConsentUrl === undefined ||
                            this.state.form.writtenConsentUrl === ''
                          }
                        />
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item label="证明人姓名">
                        <Input
                          placeholder="证明人姓名"
                          value={this.state.form.proofName}
                          onChange={this.proofNameChange}
                          style={{ width: 200 }}
                          disabled={
                            this.state.form.writtenConsentUrl === undefined ||
                            this.state.form.writtenConsentUrl === ''
                          }
                        />
                      </Form.Item>
                    </Col>
                  </Row>

                  <Row gutter={16}>
                    <Col span={8}>
                      <Form.Item label="筛查类型">
                        {getFieldDecorator('screeningType', {
                          initialValue: this.state.form.screeningType,
                          rules: [{ required: true, message: '筛查类型不能为空' }],
                        })(
                          <Radio.Group
                            value={this.state.form.screeningType}
                            onChange={this.screeningTypeChange}
                          >
                            <Radio value={'0'}>初筛</Radio>
                            <Radio value={'1'}>随访</Radio>
                          </Radio.Group>
                        )}
                      </Form.Item>
                    </Col>
                  </Row>

                  <Row gutter={16}>
                    <Col span={6}>
                      <Button type="primary" onClick={this.saveClick}>
                        保存
                      </Button>
                      <Button
                        type="primary"
                        onClick={this.readIdCardClick}
                        style={{ marginLeft: '8px' }}
                      >
                        身份证读取
                      </Button>
                    </Col>
                  </Row>
                </Form>
              </Card>
            </Col>
          </Row>
        </Form>
      </Card>
    );
  }
}
